<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				border: 1px red solid;
				font-size: 32px;
				text-align: center;
				/*浮动float：left（左浮动）/right(右浮动)/none（没有，默认值，不浮动）*/
				float: right;
			}
			.box2{
				width: 800px;
				height: 210px;
				border: 1px solid black;
			}
			/*清除浮动的第一种方式*/
			.clear{
				clear: both;
			}
			/*清除浮动的第二种方式*/
			.bigbox{
				/*overflow: hidden;*//*超出部分隐藏*/
			}
			/*清楚浮动的第三种方式*/
			.clearfix:after{    /*在clearfix类的后面*/
				content: ;     /*内容为空*/
				display: block;    /*伪元素转化为块级盒子*/
				height: 0;     /*高度设置为0*/
				clear: both;    /*清除两端浮动*/
				visibility: hidden;    /*显示状态：隐藏*/
			}
			/*清除浮动的第四种方式：添加双伪元素*/
			.clearfix:after,.clearfix:before{
				content:;
				display: table;
			}
			.clear::after{
				clear: both;
			}
		</style>
	</head>
	<body>
		<!--传统的网页布局：标准流+浮动+定位-->  <!--上下浮动用标准流/左右浮动用浮动流-->
		<!--浮动：float-->
		<!--快速创建标签：p*3>tab-->
		<!--快速创建标签类名为box的盒子：标签.box*个数>tab-->
		<!--标准+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置-->
		<!--
		浮动的特性：
			1.浮动的元素会脱离标准流（脱标）；  解决方法:清除浮动。
			2.浮动的元素一行内显示并且顶部对齐；
			3.浮动的元素具有行内块元素类似的特性。
		清除浮动的方法：
			1.额外标签法：隔墙法。即给浮动的盒子后添加一个额外的块级标签
				并给标签加入clear:both;(清除两端浮动)。此方法不常用。
			2.给父级元素添加overflow：hidden属性。
			3.
		-->
		<div class="bigbox">
		<div class="box">1</div>
		<div class="box" style="height: 180px;">2</div>
		<div class="box" style="height: 240px ;">3</div>
		</div>
		<!--<div class="box2"></div>-->
	</body>
</html>
